<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本使用</title>
</head>

<body>
    <button id="btn">点击抽奖</button>
    <script>
        function rand(m, n) {
            return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
        }
        // 点击按钮, 2s 后显示是否中奖.  30% 概率中奖  『1-100』
        // 中奖弹出 弹出   恭喜恭喜   显示中奖号码
        // 未中奖 弹出     再接再厉   显示数字

        let btn = document.querySelector('#btn');

        //绑定事件
        // btn.onclick = function(){
        //     //定时器
        //     setTimeout(() => {
        //         //获得从 1 - 100 的一个随机数
        //         let n = rand(1, 100);
        //         //判断
        //         if(n <= 30){
        //             alert('恭喜恭喜, 您的中奖号码为' + n);
        //         }else{
        //             alert('再接再厉, 您的号码为' + n);
        //         }
        //     }, 2000);
        // }

        //promise 写法 Promise  承诺
        btn.onclick = function(){
            // Promise 是一个构造函数, new 实例化对象
            // resolve 解决  reject 拒绝
            let p = new Promise((resolve, reject) => {
                //异步操作
                setTimeout(() => {
                    //获得随机数
                    let n = rand(1, 100);
                    //判断
                    if(n <= 30){
                        //成功了
                        resolve(n); //设置 promise 为成功状态
                    }else{
                        //失败了
                        reject(n); // 设置 promise 为失败状态
                    }
                }, 2000);
            });

            //处理结果 then 然后
            p.then((value) => {
                alert('恭喜恭喜~~ 中奖号码为' + value);
            }, (reason) => { //reason 原因
                alert('再接再厉~~ 您的号码为' + reason)
            });
        }

    </script>
</body>

</html>